<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>全屏相机助手</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>
<body>
  <div class="app-container">
    <!-- 相机预览 -->
    <div class="camera-preview">
      <video id="camera-feed" autoplay></video>
      <canvas id="overlay-canvas"></canvas>
      <div id="text-overlay">
        <button class="close-btn" id="close-text-overlay">&times;</button>
        <button class="play-pause-btn" id="play-pause-text">
          <span class="play-icon">▶</span>
          <span class="pause-icon" style="display: none;">⏸</span>
        </button>
      </div>
      <!-- 延时拍摄按钮 -->
      <button id="delay-btn" class="delay-btn">
        <span class="delay-icon">延时</span>
        <span class="delay-number1">3</span>
        <span class="delay-number2">6</span>
      </button>
      <!-- 倒计时显示 -->
      <div id="countdown-overlay" class="countdown-overlay">
        <div class="countdown-number"></div>
      </div>
      <!-- Add this after the video element in the camera-preview div -->
      <div class="reference-controls" style="display: none;">
        <div class="controls-wrapper">
          <div id="play-pause-btn" style="display: none !important"></div>
          <button id="play-pause-btn-1" onclick="onPauseClick()" class="control-btn">
            <span class="play-icon">▶</span>
            <span class="pause-icon" style="display: none;">⏸</span>
          </button>
          <select id="speed" class="control-select">
            <option value="0.5">0.5x</option>
            <option value="0.7">0.7x</option>
            <option value="1.0" selected>1.0x</option>
            <option value="1.2">1.2x</option>
          </select>
          <div class="progress-container">
            <input type="range" class="progress-bar" id="video-progress" min="0" max="100" value="0">
            <div class="time-display">
              <span id="current-time">0:00</span> / <span id="total-time">0:00</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 控制面板 -->
    <div class="controls">
      <!-- 左侧控制区 -->
      <div class="left-controls">
        <!-- 美颜滤镜 -->
        <div class="filter-controls">
          <button id="beauty-filter" class="control-btn">美颜</button>
          <button id="normal-filter" class="control-btn active">原图</button>
          
          <!-- 滤镜选项面板 -->
          <div id="filter-options" class="filter-options" style="display: none;">
            <button class="close-btn" id="close-filter-options">&times;</button>
            <div class="filter-buttons">
              <button data-filter="warm" class="filter-btn">暖色</button>
              <button data-filter="cool" class="filter-btn">冷色</button>
              <button data-filter="vintage" class="filter-btn">复古</button>
              <button data-filter="dramatic" class="filter-btn">戏剧</button>
              <button data-filter="sharp" class="filter-btn">清晰</button>
            </div>
          </div>

          <!-- 优化选项面板 -->
          <div id="optimization-options" class="optimization-options" style="display: none;">
            <button class="close-btn" id="close-optimization-options">&times;</button>
            <div class="slider-group">
              <label>亮度
                <input type="range" id="brightness-slider" min="0.8" max="1.5" step="0.05" value="1.2">
              </label>
              <label>美肤
                <input type="range" id="smoothness-slider" min="0" max="1" step="0.1" value="0.5">
              </label>
            </div>
          </div>
        </div>

        <!-- 参考媒体控制 -->
        <div class="media-controls">
          <input type="file" id="media-input" accept="image/*,video/*" hidden>
          <button id="load-media" class="control-btn">加载参考</button>
          <button id="clear-media" class="control-btn">清除参考</button>
        </div>
      </div>

      <!-- 中央控制区 -->
      <div class="center-controls">
        <!-- 透明度控制 -->
        <div class="slider-container">
          <span>透明度</span>
          <input type="range" id="opacity" min="0" max="1" step="0.1" value="1">
        </div>

        <!-- 拍摄按钮和模式选择 -->
        <div class="capture-container">
          <button id="capture-btn" class="capture-button">
            <span class="capture-icon photo-icon"></span>
            <span class="capture-icon video-icon"></span>
            <span class="recording-indicator"></span>
          </button>
          <div class="capture-mode-select">
            <button id="photo-mode" class="mode-btn active">拍照</button>
            <button id="video-mode" class="mode-btn">录像</button>
          </div>
        </div>
      </div>

      <!-- 右侧控制区 -->
      <div class="right-controls">
        <!-- 文本控制 -->
        <div class="text-controls">
          <button id="add-text" class="control-btn">添加文本</button>
          <div id="text-control-panel" class="text-panel" style="display: none;">
            <div class="font-size-controls">
              <button class="font-size-btn decrease" onclick="changeFontSize(-1)" title="减小字体">
                <span class="font-size-icon">A</span>
                <span class="font-size-symbol">-</span>
              </button>
              <input type="number" id="text-size" min="10" max="50" color="red" value="24" class="font-size-input">
              <button class="font-size-btn increase" onclick="changeFontSize(1)" title="增大字体">
                <span class="font-size-icon">A</span>
                <span class="font-size-symbol">+</span>
              </button>
            </div>
            <div class="text-scroll-controls">
              <div class="scroll-speed-label">滚动速度</div>
              <select id="text-scroll-speed" class="styled-select">
                <option value="very-slow">极慢</option>
                <option value="slow">慢速</option>
                <option value="normal" selected>正常</option>
                <option value="fast">快速</option>
                <option value="very-fast">极快</option>
                <option value="custom">自定义</option>
              </select>
              <div id="custom-scroll-controls" class="custom-scroll-controls" style="display: none;">
                <input type="number" id="custom-scroll-duration" min="10" max="300" value="60">
                <span class="duration-unit">秒</span>
              </div>
            </div>
          
            <div class="text-control-buttons">
              <button id="reset-text-position" onclick="resetTextPosition()" class="control-btn">重置位置</button>
              <button id="hide-text-controls" onclick="hideTextControl()" class="control-btn">隐藏控制</button>
            </div>
          </div>
        </div>
              <button   class="text-controls-show" id="show-controls" onclick="showControls()">展示控制</button>
      </div>
    </div>

    <!-- 文本输入弹窗 -->
    <div id="text-modal" class="modal" style="display: none;">
      <div class="modal-content">
        <textarea id="text-input" placeholder="请输入文本内容..."></textarea>
        <div class="modal-buttons">
          <button id="confirm-text" class="control-btn">确认</button>
          <button id="cancel-text" class="control-btn">取消</button>
        </div>
      </div>
    </div>

    <!-- 文本覆盖层 -->
    <div id="text-overlay" class="text-overlay">
      <div  class="text-content"></div>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>